<template>
  <div class="container-id">
    <div class="ceng1-id">
      <div class="kuai-id kuai1-id">
        <el-card shadow="hover">
          <div slot="header" class="title-id">
            <img :src="require('../images/title01.png')" alt="信息管理图标">
            <span>信息管理</span>
          </div>
          <el-tabs v-model="isShow1" type="border-card">
            <el-tab-pane label="所有信息">
              <el-table :data="kuai1_content[0].listitem" border style="width: 100%">
                <el-table-column prop="titleName" label="标题" show-overflow-tooltip width="25%"></el-table-column>
                <el-table-column prop="orgName" label="机构" show-overflow-tooltip width="33%"></el-table-column>
                <el-table-column prop="infoType" label="类型" show-overflow-tooltip width="15%"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" :formatter="formatTime" show-overflow-tooltip width="17%"></el-table-column>
                <el-table-column label="操作" width="10%">
                  <template slot-scope="scope">
                    <el-button 
                      icon="el-icon-star-off" 
                      @click="btn_kuai1($event, scope.row)" 
                      :class="scope.row.isCollection === 'is_col' ? 'is-collected' : ''"
                      circle
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div v-if="kuai1_content[0].listitem.length === 0" class="no-data">暂无数据</div>
            </el-tab-pane>
            <el-tab-pane label="我发布的">
              <el-table :data="kuai1_content[1].listitem" border style="width: 100%">
                <el-table-column prop="titleName" label="标题" show-overflow-tooltip width="25%"></el-table-column>
                <el-table-column prop="orgName" label="机构" show-overflow-tooltip width="33%"></el-table-column>
                <el-table-column prop="infoType" label="类型" show-overflow-tooltip width="15%"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" :formatter="formatTime" show-overflow-tooltip width="17%"></el-table-column>
                <el-table-column label="操作" width="10%">
                  <template slot-scope="scope">
                    <el-button 
                      icon="el-icon-star-off" 
                      @click="btn_kuai1($event, scope.row)" 
                      :class="scope.row.isCollection === 'is_col' ? 'is-collected' : ''"
                      circle
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div v-if="kuai1_content[1].listitem.length === 0" class="no-data">暂无数据</div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
      <div class="kuai-id kuai2-id">
        <el-card shadow="hover">
          <div slot="header" class="title-id">
            <img :src="require('../images/title03.png')" alt="快速查询图标">
            <span>快速查询</span>
          </div>
          <el-tabs v-model="isShow2" type="border-card">
            <el-tab-pane label="政策服务">
              <el-list :data="managementPolicyList" v-if="managementPolicyList.length > 0" border>
                <el-list-item 
                  v-for="item in managementPolicyList" 
                  :key="item.titleName" 
                  @click="goWebsiteDetail(item.websiteName)"
                  class="list-item-hover"
                >
                  {{ item.titleName }}
                </el-list-item>
              </el-list>
              <div v-if="managementPolicyList.length === 0" class="no-data">暂无数据</div>
            </el-tab-pane>
            <el-tab-pane label="信息服务">
              <el-list :data="managementInfoList" v-if="managementInfoList.length > 0" border>
                <el-list-item 
                  v-for="item in managementInfoList" 
                  :key="item.titleName" 
                  @click="goWebsiteDetail(item.websiteName)"
                  class="list-item-hover"
                >
                  {{ item.titleName }}
                </el-list-item>
              </el-list>
              <div v-if="managementInfoList.length === 0" class="no-data">暂无数据</div>
            </el-tab-pane>
            <el-tab-pane label="资质荣誉">
              <el-list :data="managementQualificationsList" v-if="managementQualificationsList.length > 0" border>
                <el-list-item 
                  v-for="item in managementQualificationsList" 
                  :key="item.titleName" 
                  @click="goWebsiteDetail(item.websiteName)"
                  class="list-item-hover"
                >
                  {{ item.titleName }}
                </el-list-item>
              </el-list>
              <div v-if="managementQualificationsList.length === 0" class="no-data">暂无数据</div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
    <div class="ceng2-id">
      <el-carousel :interval="5000" arrow="always" height="14vh">
        <el-carousel-item v-for="item in ceng2_id" :key="item.activityId">
          <div class="ceng2-txt-id">
            <div class="up-id">
              <router-link target="_blank" :to="{
                        path: '/activityinfo/receive',
                        query: {
                            activityId: item.activityId,
                            open: item.status === '报名',
                        }
                    }">
                最新活动:{{ item.activityName }}
              </router-link>
            </div>
            <div class="down-id">
              <div class="left-id">主办单位:{{ item.sponsor }}</div>
              <div class="right-id">开始时间:{{ item.startTime }}</div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="ceng3-id">
      <div class="kuai-id kuai3-id">
        <el-card shadow="hover">
          <div slot="header" class="title-id">
            <img :src="require('../images/title05.png')" alt="证书预警图标">
            <span>证书预警</span>
          </div>
          <el-tabs type="border-card">
            <el-tab-pane label="证书预警">
              <el-table :data="k3_content2" border style="width: 100%">
                <el-table-column prop="name" label="证书名称" show-overflow-tooltip width="40%"></el-table-column>
                <el-table-column prop="abutmentTime" label="获证时间" show-overflow-tooltip width="30%"></el-table-column>
                <el-table-column prop="issuanceTime" label="到期时间" show-overflow-tooltip width="30%"></el-table-column>
              </el-table>
              <div v-if="k3_content2.length === 0" class="no-data">暂无数据</div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
      <div class="kuai-id kuai4-id">
        <el-card shadow="hover">
          <div slot="header" class="title-id">
            <img :src="require('../images/title05.png')" alt="数据统计图标">
            <span>数据统计</span>
          </div>
          <div class="data-k4-id">
            <el-statistic title="入驻平台" :value="collaborativeInfoNumber" class="statistic-item"></el-statistic>
            <el-statistic title="客户数量" :value="enterpriseInfoNumber" class="statistic-item"></el-statistic>
            <el-statistic title="主营产品" :value="qualificationInfoNumber" class="statistic-item"></el-statistic>
            <el-statistic title="师资数量" :value="teacherInfoNumber" class="statistic-item"></el-statistic>
            <el-statistic title="项目总数" :value="projectInfoNumber" class="statistic-item"></el-statistic>
            <el-statistic title="在建项目" :value="projectInfoIngNumber" class="statistic-item"></el-statistic>
          </div>
        </el-card>
      </div>
      <div class="kuai-id kuai5-id">
        <el-card shadow="hover">
          <div slot="header" class="title-id">
            <img :src="require('../images/title03.png')" alt="收藏夹图标">
            <span>收藏夹</span>
          </div>
          <el-tabs v-model="isShow5" type="border-card">
            <el-tab-pane label="我的收藏">
              <el-table :data="FavoritesList" border style="width: 100%">
                <el-table-column prop="infoType" label="类型" show-overflow-tooltip width="20%"></el-table-column>
                <el-table-column prop="titleName" label="标题" show-overflow-tooltip width="35%"></el-table-column>
                <el-table-column prop="orgName" label="机构" show-overflow-tooltip width="25%"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" :formatter="formatTime" show-overflow-tooltip width="20%"></el-table-column>
              </el-table>
              <div v-if="FavoritesList.length === 0" class="no-data">暂无数据</div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
    <dig-release :id="releaseId" v-if="releaseOpen" @custom-event="changeEvent"></dig-release>
  </div>
</template>

<script>
import { listManagement } from "@/api/website/website";
import { getTeacherNumber, getQualificationNumber, getCollaborativeNumber, getEnterpriseNumber, getProjectIngNumber, getProjectNumber } from "@/api/homePage/page";
import { adminList, activityThree, collectionInfo, collectionNoInfo, getCollectionList } from "@/api/index";
import { listManagementTwo } from "@/api/collaborative/management";
import { parseTime } from "../utils/ruoyi";
import { listManagementWarn } from "@/api/honor/management";
import DigRelease from "./DigRelease.vue";

// Element UI 组件引入 - 按需引入方式
import { 
  Card, Tabs, TabPane, Table, TableColumn, Button, 
  List, ListItem, Carousel, CarouselItem, Statistic
} from 'element-ui';

export default {
  components: { 
    DigRelease,
    // 注册Element UI组件
    ElCard: Card,
    ElTabs: Tabs,
    ElTabPane: TabPane,
    ElTable: Table,
    ElTableColumn: TableColumn,
    ElButton: Button,
    ElList: List,
    ElListItem: ListItem,
    ElCarousel: Carousel,
    ElCarouselItem: CarouselItem,
    ElStatistic: Statistic
  },
  data() {
    return {
      releaseId: null,
      releaseOpen: false,
      managementPolicyList: [],
      managementInfoList: [],
      managementQualificationsList: [],
      queryParamsWebsite: {
        pageNum: 1,
        pageSize: 30,
        publisherType: null
      },
      queryParams: {
        pageNum: 1,
        pageSize: 15
      },
      queryParamsTwo: {
        pageNum: 1,
        pageSize: 15,
        state: null,
        recipientId: null,
      },
      queryParamsHonor: {
        pageNum: 1,
        pageSize: 15,
      },
      honorDeptName: null,
      isShow1: "0",
      isShow2: "0",
      isShow5: "0",
      teacherInfoNumber: 0,
      qualificationInfoNumber: 0,
      collaborativeInfoNumber: 0,
      enterpriseInfoNumber: 0,
      projectInfoNumber: 0,
      projectInfoIngNumber: 0,
      kuai1_content: [
        {
          listitem: []
        },
        {
          listitem: []
        }
      ],
      ceng2_id: [],
      k3_content2: [],
      FavoritesList: []
    }
  },
  methods: {
    formatTime(row, column) {
      return parseTime(row[column.property], '{y}-{m}-{d}');
    },
    navigate(i) {
      if (i.infoType === '新闻资讯' || i.infoType === '行业动态') {
        this.releaseId = i.infoId;
        this.releaseOpen = true;
      } else {
        this.$router.push({ path: i.route, query: { id: i.infoId } });
      }
    },
    changeEvent(data) {
      this.releaseOpen = data;
    },
    listManagementIndex() {
      listManagementWarn(this.queryParamsHonor).then(res => {
        this.k3_content2 = res.rows;
      })
    },
    goHonorList() {
      this.$router.push("/operate/honorManager");
    },
    activityThree() {
      activityThree().then(res => {
        this.ceng2_id = res;
      })
    },
    getTwoList() {
      this.queryParamsTwo.state = "1";
      listManagementTwo(this.queryParamsTwo).then(response => {
        // 处理k3_content1数据
      });
    },
    getCollaborativeInfoNumber() {
      const organizationId = this.$store.state.user.info.orgId;
      getCollaborativeNumber(organizationId).then(response => {
        this.collaborativeInfoNumber = response;
      });
    },
    getQualificationInfoNumber() {
      const organizationId = this.$store.state.user.info.orgId;
      getQualificationNumber(organizationId).then(response => {
        this.qualificationInfoNumber = response;
      });
    },
    getTeacherInfoNumber() {
      const organizationId = this.$store.state.user.info.orgId;
      getTeacherNumber(organizationId).then(response => {
        this.teacherInfoNumber = response;
      });
    },
    getEnterpriseInfoNumber() {
      const belongTo = this.$store.state.user.info.orgId;
      getEnterpriseNumber(belongTo).then(response => {
        this.enterpriseInfoNumber = response;
      });
    },
    getProjectInfoNumber() {
      const belongTo = this.$store.state.user.info.orgId;
      getProjectNumber(belongTo).then(response => {
        this.projectInfoNumber = response;
      });
    },
    getProjectInfoIngNumber() {
      const belongTo = this.$store.state.user.info.orgId;
      getProjectIngNumber(belongTo).then(response => {
        this.projectInfoIngNumber = response;
      });
    },
    getWebsitePolicyList() {
      this.queryParamsWebsite.publisherType = "0";
      listManagement(this.queryParamsWebsite).then(response => {
        this.managementPolicyList = response.rows;
      });
    },
    getWebsiteInfoList() {
      this.queryParamsWebsite.publisherType = "1";
      listManagement(this.queryParamsWebsite).then(response => {
        this.managementInfoList = response.rows;
      });
    },
    getWebsiteQualificationsList() {
      this.queryParamsWebsite.publisherType = "2";
      listManagement(this.queryParamsWebsite).then(response => {
        this.managementQualificationsList = response.rows;
      });
    },
    goWebsiteDetail(url) {
      if (!url.startsWith('http://') && !url.startsWith('https://')) {
        url = 'http://' + url;
      }
      window.open(url, '_blank');
    },
    getInfoList() {
      adminList(this.queryParams).then(res => {
        this.kuai1_content[0].listitem = res.rows;
      })
    },
    getCollectionList() {
      getCollectionList().then(res => {
        this.FavoritesList = res;
      })
    },
    getInfoSelf() {
      List(this.queryParams).then(res => {
        this.kuai1_content[1].listitem = res.rows;
      })
    },
    btn_kuai1(e, i) {
      if (i.isCollection === "no_col") {
        i.isCollection = "is_col"
        collectionInfo(i).then(res => {
          if (res.code === 200) {
            this.$message.success("收藏成功");
            this.getCollectionList();
            this.getInfoList();
            this.getInfoSelf();
          } else {
            this.$message.error("收藏失败");
          }
        })
      } else {
        i.isCollection = "no_col"
        collectionNoInfo(i).then(res => {
          if (res.code === 200) {
            this.$message.success("取消收藏成功");
            this.getCollectionList();
          } else {
            this.$message.error("取消收藏失败");
          }
        })
      }
    }
  },
  created() {
    this.getCollectionList();
    this.activityThree();
    this.getInfoList();
    this.getInfoSelf();
    this.listManagementIndex();
    this.getWebsitePolicyList();
    this.getWebsiteInfoList();
    this.getWebsiteQualificationsList();
    this.getTeacherInfoNumber();
    this.getQualificationInfoNumber();
    this.getCollaborativeInfoNumber();
    this.getEnterpriseInfoNumber();
    this.getProjectInfoNumber();
    this.getProjectInfoIngNumber();
    this.getTwoList();
  }
}
</script>

<style scoped>
.container-id {
  height: 100%;
  width: 100%;
  font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif;
  color: #676767;
  background-color: #f3f3f5;
  padding: 10px;
  box-sizing: border-box;
}

/* 布局样式 */
.ceng1-id, .ceng3-id {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  gap: 10px;
}

.ceng2-id {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
}

.kuai-id {
  flex: 1;
  height: 100%;
}

.kuai1-id {
  flex: 2;
}

/* 标题样式 */
.title-id {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.title-id img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* 内容区域样式 */
::v-deep .el-card__body {
  padding: 15px;
}

::v-deep .el-tabs__content {
  margin-top: 10px;
}

/* 表格样式 */
::v-deep .el-table {
  margin-top: 10px;
}

::v-deep .el-table th {
  background-color: #f5f7fa;
}

/* 列表样式 */
::v-deep .el-list {
  margin-top: 10px;
}

.list-item-hover {
  cursor: pointer;
  transition: background-color 0.2s;
}

.list-item-hover:hover {
  background-color: #f5f7fa;
}

/* 统计数据样式 */
.data-k4-id {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.statistic-item {
  flex: 1 1 30%;
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

::v-deep .el-statistic__title {
  font-size: 14px;
  color: #676767;
}

::v-deep .el-statistic__value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-top: 5px;
}

/* 轮播样式 */
.ceng2-txt-id {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  color: white;
  background-color: #1890ff;
}

.up-id {
  font-size: 18px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up-id a {
  color: white;
  text-decoration: none;
}

.down-id {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

/* 空数据样式 */
.no-data {
  text-align: center;
  padding: 30px 0;
  color: #999;
  background-color: #f9f9f9;
  border-radius: 4px;
  margin-top: 10px;
}

/* 收藏按钮样式 */
::v-deep .el-button.is-collected {
  color: #f56c6c;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .ceng3-id {
    flex-wrap: wrap;
  }
  
  .kuai3-id, .kuai4-id, .kuai5-id {
    flex: 1 1 100%;
  }
}
</style>
